<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="myCanvas" width="500" height="200" style="border: solid 1px rebeccapurple;"></canvas>

<canvas width="450" height="253" style="border: solid 1px red;position: absolute; top: 184px; left: 203px; z-index: 1;"></canvas>

</body>
<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    canvas.addEventListener("click",handleClick);
    canvas.addEventListener("mousemove",handleMouseMove);

    function handleMouseMove(event) {
        // var e = event | window.event;
        // var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        // var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        // var x = e.pageX || e.clientX + scrollX;
        // var y = e.pageY || e.clientY + scrollY;
        //alert('x: ' + x + '\ny: ' + y);

        let x = event.offsetX;
        let y = event.offsetY;

        console.log(x,y)
       // return { 'x': x, 'y': y };
    }

    function handleClick(event) {

        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.fillRect(50,50,100,100);

        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.fillRect(200,200,50,50);



    }

</script>
</html>